<template>
    <section style="width:100%">
        <el-cascader :options="options" v-model="codes" :props="props1" clearable @change="changeSelect" style="width:100%"
            placeholder="请选择部门" />
    </section>
</template>

<script  name="DeparmentCascader">
import { onMounted, reactive, toRefs } from 'vue'

import api from '@/api/index'
export default {
    emits: ['value'],
    name: 'DeparmentCascader',
    autoImport:true,
    props: {
        backValue: {
            type: Array,
            default:()=>[]
        }
    },
    setup(props, { emit }) {
        const state = reactive({
            props1: {
                checkStrictly: true,
                label: 'departmentName',
                value: 'departmentId',
                children: 'children'

            },
            options: [],
            codes: []

        })
        const methods = {
            getList() {
                api.publicApi.orgInfo().then(res => {
                    state.options = res

                })
            },
            changeSelect(e) {
                emit('update:value', e)
            }
        }
        onMounted(() => {
            methods.getList()
        })
        watch(() => (props.backValue), (newVal) => {
            if (newVal.length==0) state.codes = []
        })
        return {
            ...toRefs(state),
            ...methods
        }
    }
}
</script>

<style lang="scss" scoped>
// scss
</style>
